<!DOCTYPE html>
<html>
<head>
<title>Speed-Time Graph</title>
<style>
  body {
    font-family: sans-serif;
    text-align: left;
  }
  canvas {
    border: none;
  }
</style>
</head>
<body>

<p>Fig. 1.1 is the speed-time graph for an ice skater.</p>
<canvas id="myCanvas" width="650" height="600"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// --- Configuration ---
const marginLeft = 80;
const marginRight = 30;
const marginTop = 30;
const marginBottom = 80;

const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

const plotWidth = canvasWidth - marginLeft - marginRight;
const plotHeight = canvasHeight - marginTop - marginBottom;

const tMax = 12.0;
const speedMax = 12.0;

// --- Helper Functions ---
function mapX(t) {
  return marginLeft + (t / tMax) * plotWidth;
}

function mapY(speed) {
  return marginTop + plotHeight - (speed / speedMax) * plotHeight;
}

// --- Drawing ---

// Clear canvas
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = 'black'; // Reset fillStyle

// Draw grid lines
// Minor grid lines
ctx.strokeStyle = '#e0e0e0'; // Light gray for minor grid
ctx.lineWidth = 0.5;
const xMinorInterval = 0.2;
const yMinorInterval = 0.2;

for (let i = 1; i * xMinorInterval <= tMax; i++) {
    const t = i * xMinorInterval;
    ctx.beginPath();
    ctx.moveTo(mapX(t), marginTop);
    ctx.lineTo(mapX(t), marginTop + plotHeight);
    ctx.stroke();
}
for (let i = 1; i * yMinorInterval <= speedMax; i++) {
    const s = i * yMinorInterval;
    ctx.beginPath();
    ctx.moveTo(marginLeft, mapY(s));
    ctx.lineTo(marginLeft + plotWidth, mapY(s));
    ctx.stroke();
}

// Major grid lines
ctx.strokeStyle = '#b0b0b0'; // Darker gray for major grid
ctx.lineWidth = 1;
const xMajorInterval = 2;
const yMajorInterval = 2;

for (let i = 0; i * xMajorInterval <= tMax; i++) {
    const t = i * xMajorInterval;
    ctx.beginPath();
    ctx.moveTo(mapX(t), marginTop);
    ctx.lineTo(mapX(t), marginTop + plotHeight);
    ctx.stroke();
}
for (let i = 0; i * yMajorInterval <= speedMax; i++) {
    const s = i * yMajorInterval;
    ctx.beginPath();
    ctx.moveTo(marginLeft, mapY(s));
    ctx.lineTo(marginLeft + plotWidth, mapY(s));
    ctx.stroke();
}

// Draw axes (over the grid lines for emphasis)
ctx.strokeStyle = 'black';
ctx.lineWidth = 1.5;
// Y-axis
ctx.beginPath();
ctx.moveTo(marginLeft, marginTop);
ctx.lineTo(marginLeft, marginTop + plotHeight);
ctx.stroke();
// X-axis
ctx.beginPath();
ctx.moveTo(marginLeft, marginTop + plotHeight);
ctx.lineTo(marginLeft + plotWidth, marginTop + plotHeight);
ctx.stroke();


// Draw axis labels and ticks
ctx.fillStyle = 'black';
ctx.font = '16px sans-serif';

// X-axis labels and ticks
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
for (let t = 0; t <= tMax; t += 2) {
  const x = mapX(t);
  ctx.fillText(t.toFixed(1), x, marginTop + plotHeight + 10);
}
ctx.fillText('time t / s', marginLeft + plotWidth / 2, marginTop + plotHeight + 40);

// Y-axis labels and ticks
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
for (let s = 2; s <= speedMax; s += 2) {
    const y = mapY(s);
    ctx.fillText(s.toString(), marginLeft - 10, y);
}
// 0 label
ctx.fillText('0', marginLeft - 10, mapY(0));

// Y-axis title (two lines)
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
const yAxisLabelX = marginLeft - 45;
ctx.fillText('speed', yAxisLabelX, mapY(12));
ctx.fillText('m/s', yAxisLabelX, mapY(12) + 18);


// Draw the graph line
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.beginPath();

// Part 1: Constant speed from t=0 to t=3
ctx.moveTo(mapX(0), mapY(11));
ctx.lineTo(mapX(3), mapY(11));

// Part 2: Constant deceleration from t=3 to t=6
ctx.lineTo(mapX(6), mapY(5));

// Part 3: Curve with decreasing deceleration from t=6 to t=12
const curvePoints = [
  {t: 7.0, s: 3.6},
  {t: 8.0, s: 2.6},
  {t: 9.0, s: 1.9},
  {t: 10.0, s: 1.4},
  {t: 11.0, s: 1.0},
  {t: 12.0, s: 0.8}
];
curvePoints.forEach(point => {
  ctx.lineTo(mapX(point.t), mapY(point.s));
});

ctx.stroke();


// Add Fig. 1.1 label at the bottom
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.font = 'bold 16px sans-serif';
ctx.fillText('Fig. 1.1', canvasWidth / 2, canvasHeight - 10);

</script>

</body>
</html>